<template>
    <div class="inner">
        <div class="item-image">
            <img :src="item.coverUrl" alt="">
        </div>
        <div class="item-detail" :class="{'textColor':item.readState=='1'}">
            <div class="item-title">
                {{item.title}}
            </div>
            <div class="mainmessage"><span>{{item.source}}</span><span :class="{'textColor': item.readState=='1'}">{{item.time}}</span></div>
        </div>
    </div>
</template>

<script>
import {getnewslist} from '@/api/api'
export default {
    name:'loadmore',
    data() {
        return {
            
        };
    },
    props:['item']
};
</script>

<style lang="stylus" scoped>
.inner {
    color: #333;  
    .item-image{
        display:inline-block;
        position:absolute;
        &>img{
            width:110px;
            height:70px;
            vertical-align:top;
            border-radius:7px;
        }
    }
    .item-detail{
        vertical-align: top;
        display: inline-block;
        margin-left: 130px;
        height:70px;     
                         
        position: relative;
        &.textColor{
            color:#BFBFBF;
        }
        .item-title{
            display: block;
            width:100%;
            font-size: 16px;
            line-height: 21px;
            max-height: 42px;
            overflow: hidden;
        }
        .mainmessage{
            position: absolute;
            bottom: 0px;
            font-size: 12px;
            span{
                margin-right: 12px;
                margin-bottom:10px
            }
        }
    }
    &.textColor{
        color:#BFBFBF;
    }
}
</style>